<template>
  <div class="home">
    <h2>Home View</h2>
    <!--counterStore.count依赖的是counterStore，所以具备响应式-->
    <h2>count：{{counterStore.count}}</h2>
    <hr/>
    <!--这里的count是counterStore结构出来的，没有响应式-->
    <h2>count：{{count}}</h2>
    <button @click="incrementCount">count+1</button>
  </div>
</template>

<script setup>
  import {toRefs} from 'vue'
  import {storeToRefs} from 'pinia'
  import useCounter from "../stores/counter.js"
  const counterStore=useCounter()

  // const {count}=counterStore // 不是响应式的
  // 方案一：使用vue的toRefs()，先对counterStore进行包裹，然后再解构
  // const {count}=toRefs(counterStore) // 是响应式的

  // 方案二：使用pinia的storeToRefs()
  const {count}=storeToRefs(counterStore)

  function incrementCount(){
    counterStore.count++
  }
</script>

<style scoped>

</style>